<template>
    <el-container style="text-align: right; font-size: 12px">
        <el-backtop :bottom="60"></el-backtop>
        <!--********** 头部 -->
        <el-header style="height:auto"
                   :class="addpadding">
            <e-header></e-header>
        </el-header>
        <!--********** 主体 -->
        <el-main style="height:auto"
                 :class="bacColor">
            <div class="mo_login"
                 v-loading="loading"
                 element-loading-text="拼命加载中"
                 element-loading-spinner="el-icon-loading"
                 element-loading-background="#ffffff">
                <div class="add_line">
                    <div class="addbreadcrumb">
                        <el-breadcrumb separator-class="el-icon-arrow-right">
                            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                            <el-breadcrumb-item :to="{ path: '/Mypublish' }">{{text_cate_name}}</el-breadcrumb-item>
                            <el-breadcrumb-item>文章上传</el-breadcrumb-item>
                        </el-breadcrumb>

                    </div>
                </div>
                <div class="text_title">
                    <p>文章上传</p>
                </div>
                <div class="add_spragging"></div>
                <div class="text_msg">
                    <div class="msg_title">
                        <p>文章信息</p>
                    </div>
                    <div class="msg_headline">
                        <el-input class="headline-input"
                                  placeholder="请输入标题"
                                  v-model="headline"
                                  clearable> </el-input>
                    </div>

                    <div class="mes_choose">
                        <div class="left_choose">
                            <el-select v-model="leftchoose"
                                       placeholder="请选择文章类型"
                                       @change="getChoose(leftchoose)">
                                <el-option v-for="item in leftoptions"
                                           :key="item.value"
                                           :label="item.label"
                                           :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                        <div class="right_choose">
                            <el-select v-model="rightchoose"
                                       placeholder="请选择具体分类"
                                       @change="getPrice(rightchoose)">
                                <el-option v-for="item in rightoptions"
                                           :key="item.value"
                                           :label="item.label"
                                           :value="item.value">
                                </el-option>
                            </el-select>
                        </div>

                    </div>

                    <div class="msg_synopsis">
                        <el-input class="headline-input"
                                  placeholder="请输入文章简介"
                                  v-model="synopsis"
                                  clearable> </el-input>
                    </div>
                </div>
                <div class="add_spragging"></div>
                <div class="text_img">
                    <div class="img_title">
                        <p>上传文章封面图片</p>
                    </div>

                    <div class="img_upload">
                        <el-upload class="addleft"
                                   ref="upload_img"
                                   action=""
                                   accept="image/jpeg,image/jpg,image/png"
                                   list-type="picture-card"
                                   :on-remove="handleRemove"
                                   :on-exceed="handleExceedimg"
                                   :limit="1"
                                   :file-list="file_list"
                                   :http-request="uploadSectionFile">
                            <i class="el-icon-plus"></i>

                        </el-upload>
                        <el-dialog :visible.sync="dialogVisible"
                                   class="addstyle">
                            <img width="100%"
                                 :src="dialogImageUrl"
                                 alt="">
                        </el-dialog>
                        <div slot="tip"
                             class="el-upload__tip addtitile">只能一张上传jpeg、jpg、png 格式的图片，图片大小在2M以内。</div>
                    </div>
                </div>
                <div class="add_spragging"></div>
                <div class="text_edit">
                    <div class="edit_title">
                        <p>编辑文章内容</p>
                    </div>
                    <!-- 富文本编辑器 -->
                    <div class="edit_content ql-toolbar">
                        <!-- //直接隐藏掉就好了，用功能不用样式  -->
                        <el-upload v-show="false"
                                   id="quill-upload"
                                   accept="image/jpeg,image/jpg,image/png"
                                   :limit="100"
                                   :show-file-list="false"
                                   action=""
                                   name="img"
                                   ref="upload_img"
                                   :file-list="file_list"
                                   list-type="picture-card"
                                   :http-request="uploadtextFile">

                            <el-button size="small"
                                       type="primary"></el-button>
                            <div slot="tip"
                                 class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                        </el-upload>
                        <el-row v-loading="uillUpdateImg">
                            <quill-editor v-model="detailContent"
                                          ref="myQuillEditor"
                                          style="height: 500px;"
                                          :options="editorOption"
                                          @change="onEditorChange($event)">
                                <!-- 自定义toolar -->
                                <div id="toolbar"
                                     slot="toolbar">

                                    <button class="ql-bold"
                                            title="加粗">Bold</button>
                                    <button class="ql-italic"
                                            title="斜体">Italic</button>
                                    <button class="ql-underline"
                                            title="下划线">underline</button>
                                    <button class="ql-strike"
                                            title="删除线">strike</button>
                                    <button class="ql-blockquote"
                                            title="引用"></button>
                                    <button class="ql-code-block"
                                            title="代码"></button>
                                    <button class="ql-header"
                                            value="1"
                                            title="标题1"></button>
                                    <button class="ql-header"
                                            value="2"
                                            title="标题2"></button>
                                    <!--Add list -->
                                    <button class="ql-list"
                                            value="ordered"
                                            title="有序列表"></button>
                                    <button class="ql-list"
                                            value="bullet"
                                            title="无序列表"></button>
                                    <!-- Add font size dropdown -->
                                    <select class="ql-header"
                                            title="段落格式">
                                        <option selected>段落</option>
                                        <option value="1">标题1</option>
                                        <option value="2">标题2</option>
                                        <option value="3">标题3</option>
                                        <option value="4">标题4</option>
                                        <option value="5">标题5</option>
                                        <option value="6">标题6</option>
                                    </select>
                                    <select class="ql-size"
                                            title="字体大小">
                                        <option value="10px">10px</option>
                                        <option value="12px">12px</option>
                                        <option value="14px">14px</option>
                                        <option value="16px"
                                                selected>16px</option>
                                        <option value="18px">18px</option>
                                        <option value="20px">20px</option>
                                    </select>
                                    <select class="ql-font"
                                            title="字体">
                                        <option value="SimSun">宋体</option>
                                        <option value="SimHei">黑体</option>
                                        <option value="Microsoft-YaHei">微软雅黑</option>
                                        <option value="KaiTi">楷体</option>
                                        <option value="FangSong">仿宋</option>
                                        <option value="Arial">Arial</option>
                                    </select>
                                    <!-- Add subscript and superscript buttons -->
                                    <select class="ql-color"
                                            value="color"
                                            title="字体颜色"></select>
                                    <select class="ql-background"
                                            value="background"
                                            title="背景颜色"></select>
                                    <select class="ql-align"
                                            value="align"
                                            title="对齐"></select>
                                    <button class="ql-image"
                                            title="上传图片"></button>
                                    <button class="ql-clean"
                                            title="还原"></button>
                                    <!-- You can also add your own -->

                                </div>
                            </quill-editor>
                        </el-row>
                    </div>
                </div>

                <div class="text-calculate">
                    <div class="add-name">
                        <p>
                            发布收费计算：
                        </p>
                    </div>

                    <div class="add-day">
                        <el-input v-model="fateDay"
                                  ref='ele'
                                  oninput="value=value.replace(/[^\d]/g,'')"
                                  :minlength="1"
                                  :maxLength='5'
                                  placeholder="请输入发布天数"
                                  @input="addvesternumber()">
                        </el-input>
                    </div>
                    <div class="add-unit-price">
                        <p>
                            该分类的收费标准是{{price}}元/天
                        </p>
                    </div>

                    <div class="add-total-prices">
                        <p>发布该信息总金额：{{totalMoney}}元 </p>
                    </div>
                    <div class="add-balance">
                        <p>您的当前余额为:{{userMoney}}元</p>
                    </div>
                </div>

                <div class="text_button">
                    <div class="button_div">
                        <el-button class="addbutton"
                                   type="primary"
                                   @click="TextSubmit(headline,leftchoose,rightchoose,synopsis,coverImg,detailContent)">发布</el-button>
                    </div>
                </div>
            </div>
        </el-main>

        <!--********** 底部 -->
        <el-footer style="height:auto">
            <e-footer></e-footer>
        </el-footer>
    </el-container>

</template>
<script>
import eHeader from "@/components/public/Header.vue";
import eFooter from "@/components/public/Footer.vue";
import { throttle } from "../../ElementUI/public.js";
import {
    Quill, quillEditor
} from 'vue-quill-editor'
//import { container, ImageExtend, QuillWatch } from "quill-image-extend-module";
import { quillRedefine } from 'vue-quill-editor-upload'//引入图片上传
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import '../../assets/css/font.css'

// 自定义字体大小
let Size = Quill.import('attributors/style/size')
Size.whitelist = ['10px', '12px', '14px', '16px', '18px', '20px']
Quill.register(Size, true)

// 自定义字体类型
var fonts = ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial', 'Times-New-Roman', 'sans-serif',
    '宋体', '黑体'
]
var Font = Quill.import('formats/font')
Font.whitelist = fonts
Quill.register(Font, true)

export default {
    props: ['content'],
    data() {
        return {
            text_cate_name: "我的发布",
            headline: "",
            leftoptions: [{
                value: 1,
                label: '热点板块'
            }, {
                value: 2,
                label: "精推板块"
            }],
            leftchoose: [],
            rightoptions: [],
            rightchoose: [],
            synopsis: "",
            coverImg: "",

            quillUpdateImg: false, // 根据图片上传状态来确定是否显示loading动画，刚开始是false,不显示
            serverUrl: '',  // 这里写你要上传的图片服务器地址
            header: { token: sessionStorage.token },  // 有的图片服务器要求请求头需要有token之类的参数，写在这里
            detailContent: '', // 富文本内容
            editorOption: {}, // 富文本编辑器配置

            serverUrl: '/picupload',  // 这里写你要上传的图片服务器地址
            // header: { token: sessionStorage.token },  // 有的图片服务器要求请求头需要有token 
            uillUpdateImg: false,                        //根据图片上传状态来确定是否显示loading动画
            textvalue: this.content,
            //content: null,
            editorOption: {
                placeholder: "请输入文章内容，插入图片请调整居中格式！",
                theme: "snow", // or 'bubble' 
                modules: {
                    toolbar: {
                        container: '#toolbar',
                        handlers: {
                            'image': function (value) {
                                if (value) {
                                    // 给个点击触发Element-ui，input框选择图片文件

                                    document.querySelector('#quill-upload input').click()
                                } else {
                                    this.quill.format('image', false);
                                }
                            }
                        }
                    }
                }
            },

            dialogImageUrl: '',
            dialogVisible: false,
            file_list: [   //展示已上传的图片数据  【修改时用的】
                // {
                //   name: '01',
                //   url: 'http://voucher-backend.frgiftcube.com:80/upload/2019/07/31/1847366e138ac779a7c5bd229b65a2d4e130a1e5.jpg'
                // }
            ],
            accessId: 0,
            addpadding: "addpadding",
            bacColor: "#F0FFFE",
            imglist: false,
            loading: false,
            fateDay: "",
            price: 0,
            totalMoney: 0,
            userMoney: 0
        };
    },
    components: {
        eHeader,
        eFooter,
        quillEditor
    },
    created() {
        //读取sessionStorage的ID
        this.accessId = localStorage.getItem('accessId')
        let getColor = localStorage.getItem('background-color')
        let Colorarr = getColor.slice(1, 7)
        this.bacColor = Colorarr
        this.askBalance()
    },
    mounted() {
        this.$bus.$on('changeColor', (e) => {
            this.addpadding = "addpadding";
            if (this.bacColor != e) {
                let Colorarr = e.slice(1, 7)
                this.bacColor = Colorarr
            }
        })
    },
    methods: {
        //文章选择类型
        getChoose(leftchoose) {
            let _this = this;
            this.rightoptions = [];
            this.rightchoose = "";
            let Url = "/darticlecate?fcate=" + leftchoose + "&page=1&limit=1000"
            let Params = {};
            this.$https.fetchGet(Url, Params).then(res => {
                let resdata = res.data;
                switch (resdata.code) {
                    case 1000:
                        let adddata = resdata.data
                        switch (adddata.current_page) {
                            case 1:
                                let spotdata = adddata.data;
                                for (var i = 0; i < spotdata.length; i++) {
                                    this.rightoptions.push({
                                        label: spotdata[i].cate_name,
                                        value: spotdata[i].id,
                                        price: spotdata[i].price,
                                    });
                                }
                                break;
                        }
                        break;
                    case 1002:
                        console.log(resdata.msg)
                        break
                }

            });

        },
        //**********封面图片上传部分
        //文件超出个数限制时的钩子【判断上传的图片是否超过限制，超过提醒删除再进行上传】
        handleExceedimg: function () {
            this.$alert('图片最多上传一张，请删除再重新上传！', '', {
                showConfirmButton: false,
                callback: action => { }
            });
        },
        // 文件列表移除文件时的钩子
        handleRemove: function (file, fileList) {
            this.dialogImageUrl = '';
        },
        uploadSectionFile: function (params) {
            // 自定义上传方法
            let that = this,
                file = params.file,  //获取上传的文件
                fileType = file.type,   //获取文件类型
                isImage = fileType.indexOf('image') != -1,  // 判断是否是图片类型
                isLt2M = file.size / 1024 / 1024 < 2;


            if (!isLt2M) {  // 判断大小
                alert("上传图片的大小不能超过 2MB!");
                that.$refs.upload_img.uploadFiles = [];  //不符合就清空已选择的图片
                return;
            }
            if (!isImage) {  // 文件格式
                alert("请选择图片文件！");
                that.$refs.upload_img.uploadFiles = [];   //不符合就清空已选择的图片
                return;
            }
            if (isImage) {
                var img = new Image();
                //  一切验证通过后调用上传方法
                that.uploadFile(file);

            }
        },
        uploadFile: function (file) {   // 上传的函数
            var that = this
            // let Url = "/start/picupload"
            let datas = new FormData();
            datas.append('file', file);

            that.$axios.post("/picupload", datas, { headers: { 'content-type': 'multipart/form-data' } }).then(res => {
                // let resdata = res.data;
                if (res.data.code == 0) {  //成功的话将数据插入data中
                    that.coverImg = res.data.data.src;

                    that.showError("success", "图片上传成功");
                    // that.$alert('图片上传成功！', {
                    //     showConfirmButton: true,
                    //     callback: action => { }
                    // });
                } else {
                    // 上传失败，清除已选择 内容 ，并提示失败原因
                    that.$refs.upload_img.uploadFiles = [];
                    that.file_list[0] = '';

                    that.showError("error", "图片上传异常，请重新上传图片");
                    // that.$alert('图片上传异常，请重新上传图片', {
                    //     showConfirmButton: false,
                    //     callback: action => { }
                    // });

                }
            });

        },
        //**********文章图片上传部分·
        onEditorChange({ quill, html, text }) {      //富文本编辑器内容发生改变的时候
            this.value = html
            this.$emit('textChange', html)              //将富文本编辑器输入的文本发送给父组件，父组件涉及提交添加或者更改
        },
        // 富文本图片上传前
        beforeUpload() {
            // 显示loading动画
            this.quillUpdateImg = true
        },
        // 富文本图片上传失败
        uploadError() {
            // loading动画消失
            this.quillUpdateImg = false
            this.$message.error('图片插入失败')
        },
        // 上传图片成功
        uploadSuccess(res, file) {
            // res为图片服务器返回的数据
            // 获取富文本组件实例
            let quill = this.$refs.myQuillEditor.quill
            // 如果上传成功
            if (res.code === '0' && res.info !== null) {
                // 获取光标所在位置
                let length = quill.getSelection().index;
                // 插入图片  res.info为服务器返回的图片地址
                quill.insertEmbed(length, 'image', res.info)
                // 调整光标到最后
                quill.setSelection(length + 1)
            } else {
                this.$message.error('图片插入失败')
            }
            // loading动画消失
            this.quillUpdateImg = false
        },
        //富文本编辑图片获取
        uploadtextFile: function (params) {
            // 自定义上传方法
            let that = this,
                file = params.file,  //获取上传的文件
                fileType = file.type,   //获取文件类型
                isImage = fileType.indexOf('image') != -1,  // 判断是否是图片类型
                isLt2M = file.size / 1024 / 1024 < 2;
            if (!isLt2M) {  // 判断大小
                alert("上传图片的大小不能超过 2MB!");
                that.$refs.upload_img.uploadFiles = [];  //不符合就清空已选择的图片
                return;
            }
            if (!isImage) {  // 文件格式
                alert("请选择图片文件！");
                that.$refs.upload_img.uploadFiles = [];  //不符合就清空已选择的图片
                return;
            }
            if (isImage) {
                var img = new Image();

                //  一切验证通过后调用上传方法
                that.TextuploadFile(file);

            }
        },
        //富文本编辑图片上传
        TextuploadFile: function (file) {   // 上传的函数
            var that = this
            // let Url = "/start/picupload"
            let datas = new FormData();
            datas.append('file', file);

            that.$axios.post("/picupload", datas, { headers: { 'content-type': 'multipart/form-data' } }).then(res => {
                // let resdata = res.data;
                if (res.data.code == 0) {  //成功的话将数据插入data中
                    that.showError("success", "图片上传成功");
                    // that.$alert('图片插入成功！', {
                    //     showConfirmButton: true,
                    //     callback: action => { }
                    // });
                    // res为图片服务器返回的数据
                    // 获取富文本组件实例
                    let quill = this.$refs.myQuillEditor.quill
                    // 如果上传成功
                    if (res.data.data.src !== null) {
                        // 获取光标所在位置
                        let length = quill.getSelection().index;
                        // 插入图片  res.data.data.src为服务器返回的图片地址
                        // http://sjxxlm.com/start/pic/4b81f760cafd829b63a568e0a1764f08.png
                        // http://sjxxlm.kmmyxb.net.cn/home
                        quill.insertEmbed(length, 'image', res.data.data.src)
                        // 调整光标到最后
                        quill.setSelection(length + 1)
                    } else {
                        this.$message.error('图片插入失败')
                    }
                    // loading动画消失
                    this.quillUpdateImg = false
                } else {
                    // 上传失败，清除已选择 内容 ，并提示失败原因
                    that.$refs.upload_img.uploadFiles = [];
                    that.file_list[0] = '';
                    that.showError("error", "图片上传异常，请重新上传图片");
                    // that.$alert('图片上传异常，请重新上传图片', {
                    //     showConfirmButton: false,
                    //     callback: action => { }
                    // });
                }
            });

        },
        //发布文章
        TextSubmit: throttle(function (headline, leftchoose, rightchoose, synopsis, coverImg, detailContent) {
            let _this = this;
            if (headline == "") {
                _this.headline = "",
                    _this.$alert('请填写标题', {

                        callback: action => { }
                    });
            }
            else if (leftchoose == []) {
                _this.leftchoose = [],
                    _this.$alert('请选择您要发布的类目', {

                        callback: action => { }
                    });
            }
            else if (rightchoose == []) {
                _this.rightchoose = [],
                    _this.$alert('请选择您要发布的具体文章类型', {

                        callback: action => { }
                    });
            }
            else if (synopsis == "") {
                _this.synopsis = "",
                    _this.$alert('请填写文章简介', {

                        callback: action => { }
                    });
            }
            else if (coverImg == "") {
                _this.coverImg = "",
                    _this.$alert('请上传文章封面', {

                        callback: action => { }
                    });
            }
            else if (detailContent == "") {
                _this.detailContent = "",
                    _this.$alert('请填入文章内容', {

                        callback: action => { }
                    });
            }
            else if (_this.fateDay == "") {
                _this.fateDay = "",
                    _this.$alert('请填入发布天数', {

                        callback: action => { }
                    });
            }
            else if (_this.totalMoney > _this.userMoney) {
                _this.$alert('余额不足,请充值', {

                    callback: action => { 
                      this.$router.push("/Balance")
                    }
                });

            }
            else if (headline != "" && leftchoose != [] && rightchoose != [] && synopsis != "" && coverImg != "" && detailContent != "" && _this.fateDay != "" && _this.totalMoney != "") {

                _this.loading = true
                rightchoose = rightchoose.toString();
                let Url = "/article"
                let Params = {
                    m_id: _this.accessId,
                    cate_id: rightchoose,
                    title: headline,
                    seo_keywords: synopsis,
                    thumb: coverImg,
                    content: detailContent,
                    total: _this.totalMoney,
                    fateday: _this.fateDay,
                };
                _this.$https.fetchPost(Url, Params).then(res => {

                    let resdata = res.data;
                    switch (resdata.code) {
                        case 0:

                            _this.loading = false
                            _this.$alert('发布成功！', {

                                callback: action => { }
                            });

                            _this.$router.push("/Mypublish")
                            break;
                        case 2000:

                            _this.loading = false
                            _this.$alert('发布失败！' + resdata.msg + ',请重新发布', {

                                callback: action => { }
                            });
                            break;
                        case 2001:

                            _this.loading = false
                            _this.$alert('发布失败！' + resdata.msg + ',请重新发布', {

                                callback: action => { }
                            });

                            sessionStorage.setItem("headline", headline)
                            sessionStorage.setItem("leftchoose", JSON.stringify(leftchoose))
                            sessionStorage.setItem("rightchoose", JSON.stringify(rightchoose))
                            sessionStorage.setItem("synopsis", synopsis)
                            sessionStorage.setItem("coverImg", coverImg)
                            sessionStorage.setItem("detailContent", detailContent)
                           // _this.PayOpen();
                            break;

                    }
                });

            }

        }, 5000),
        //获取分类价格
        getPrice(id) {

            for (var i = 0; i < this.rightoptions.length; i++) {
                if (this.rightoptions[i].value == id) {
                    this.price = this.rightoptions[i].price
                }
            }

        },
        //输入天数计算价格
        addvesternumber() {
            if (this.fateDay != "") {
                this.totalMoney = this.fateDay * this.price
            } else {
                this.totalMoney = 0;
            }
        },
        //请求余额接口
        askBalance() {
            let _this = this;

            let Url = "mybalance?m_id=" + _this.accessId
            //let Url = "mybalance?m_id=1" 
            let Params = {};
            this.$https.fetchGet(Url, Params).then(res => {
                let resdata = res.data;
                switch (resdata.code) {
                    case 1000:
                        //let adddata = resdata.data
                        _this.userMoney = resdata.balance

                        break;
                    case 1002:
                        console.log(resdata.msg)
                        break
                }

            });

        },
        //热点和精推权限检测
        PayOpen() {
            this.$confirm('发布热点和精推分类文章需要开通权限, 是否开通?', '权限管理', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            }).then(() => {
                this.$router.push("/MyPayA")
                // this.$message({
                //     type: 'success',
                //     message: '删除成功!'
                // });
            }).catch(() => {
                // this.$message({
                //     type: 'info',
                //     message: '已取消删除'
                // });
            });
        },
        //消息提示
        showError(type, status) {
            this.$message({
                type: type,
                showClose: true,
                center: true,
                message: status
            });
        },
    }
};
</script>
<style lang="scss"  scoped>
.el-container {
    overflow: hidden;
}
.el-main {
    overflow: auto;
    padding: 0;
}

$font-color: #fff;
$bg-color: rgba(46, 139, 87, 0.4);
$btn-color: #409eff;
$shadow-color: 3px 7px 50px -12px rgba(64, 158, 255, 0.4);
@mixin bubbleAnimation($send1, $send2) {
    animation: bubble $send1 linear infinite,
        direction $send2 ease-in-out infinite alternate;
}
.mo_login {
    position: relative;
    max-width: 1200px;
    width: 100%;
    min-width: 1000px;
    margin: 0 auto;
    margin-top: 25px;
    margin-bottom: 20px;
    padding: 0 10px 20px 10px;
    height: auto;

    overflow-y: hidden;
    background: #ffffff;
    // background: #fbfbfb;
    background-position: left top;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    &:before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        //background-image: linear-gradient(-225deg, #7de2fc 0%, #b9b6e5 100%);
        z-index: -1;
    }
    .add_line {
        width: 100%;
        height: 40px;
        .addbreadcrumb {
            width: 100%;
            height: 40px;
            font-size: 14px;
            padding-top: 13px;
            float: left;
            background: #ffffff;
            border-bottom: 2px solid #f6f6f6;
        }
    }
    .text_title {
        width: 100%;
        height: 49px;
        padding: 12px 0 0 14px;
        text-align: left;
        background: #ffffff;
        font-size: 18px;
        font-weight: 400;
        color: #252525;
    }
    .add_spragging {
        width: 100%;
        height: 20px;
        background: #f6f6f6;
    }
    .text_msg {
        width: 100%;
        height: 214px;
        background: #ffffff;
        border-radius: 6px;
        .msg_title {
            width: 100%;
            height: 0px;

            padding: 12px 0 0 14px;
            text-align: left;
            background: #ffffff;
            font-size: 14px;
            font-weight: 400;
            color: #252525;
        }
        .msg_headline {
            width: 100%;
            height: 86px;
            padding: 28px 25px 22px 25px;
            .headline-input {
                width: 100%;
                height: 32px;
                border-radius: 4px;
                .el-input--small .el-input__inner {
                    height: 40px;
                    line-height: 40px;
                }
            }
        }
        .mes_choose {
            width: 100%;
            height: 40px;
            float: left;
            padding-left: 26px;

            .left_choose {
                width: 15%;
                height: 100%;
                float: left;
                margin-right: 40px;
            }
            .right_choose {
                width: 15%;
                height: 100%;
                float: left;
            }
        }
        .msg_synopsis {
            width: 100%;
            height: 66px;
            margin-top: 29px;
            padding: 28px 25px 22px 25px;
            .headline-input {
                width: 100%;
                height: 32px;
                // background: #F5F7FA;
                border-radius: 4px;
                //border:1px solid #dddddd;
            }
        }
    }

    .text_img {
        width: 100%;
        height: 208px;
        background: #ffffff;
        border-radius: 6px;
        padding: 12px 0 0 16px;

        .img_title {
            width: 100%;
            height: 0px;
            padding: 2px 0 0 10px;
            text-align: left;
            background: #fbfbfb;
            font-size: 14px;
            font-weight: 400;
            color: #252525;
            margin-bottom: 22px;
        }
        .img_upload {
            width: 100%;
            height: auto;
            float: left;
            .addleft {
                float: left;
                // width: 128px;
                // height: 128px;
            }
            .addleft >>> .el-upload--picture-card {
                width: 128px;
                height: 128px;
            }

            .addleft >>> .el-upload-list--picture-card .el-upload-list__item {
                width: 128px;
                height: 128px;
            }
            .addstyle {
                width: 20px;
                height: 20px;
            }
        }
    }

    .text_edit {
        width: 100%;
        height: 600px;
        background: #ffffff;
        border-radius: 6px;
        overflow: hidden;
        .edit_title {
            width: 100%;
            height: 0px;
            padding: 12px 0 0 16px;
            text-align: left;
            background: #ffffff;
            font-size: 14px;
            font-weight: 400;
            color: #252525;
            margin-bottom: 22px;
        }
        .edit_content {
            width: 100%;
            height: auto;
            border-radius: 4px;
            //border-bottom: 1px solid #dddddd;
        }
    }
    .text-calculate {
        width: 100%;
        height: 80px;
        text-align: left;
        padding-bottom: 20px;
        .add-name {
            width: 10%;
            height: 30px;
            line-height: 30px;
            color: #333;
            font-size: 16px;
            float: left;
        }
        .add-day {
            width: 15%;
            float: left;
            height: 30px;
        }
        .add-unit-price {
            width: 75%;
            height: 30px;
            padding-left: 30px;
            float: left;
            text-align: left;
            line-height: 30px;
        }
        .add-total-prices {
            width: 21%;
            height: 50px;
            float: left;
            text-align: right;
            line-height: 50px;
        }
        .add-balance {
            width: 25.2%;
            height: 50px;
            float: left;
            text-align: center;
            line-height: 50px;
        }
    }
    .text_button {
        width: 100%;
        height: 51px;
        //padding-top: 15px;
        background: #ffffff;
        .button_div {
            // margin-top: 10px;
            width: 16%;
            height: 46px;
            float: left;
            .addbutton {
                width: 100%;
                height: 100%;
                font-size: 18px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #f5f2eb;
            }
        }
    }
}
.mo_login /deep/ .el-loading-spinner {
    font-size: 30px;
}
.addtitile {
    width: 100%;
    height: 30px;
    float: left;
    text-align: left;
}
.addpadding {
    padding: 0;
}
.DAEBFF {
    background: #daebff;
}
.F5F5FD {
    background: #f5f5fd;
}
.F0FFFE {
    background: #f0fffe;
}
</style>